<template>
	<view class="discovery-page">
		<!-- 顶部导航栏 -->
		<custom-navigation-bar class="nav-bar" title="贵宾服务中心" :back="false"></custom-navigation-bar>
		<!-- 内容列表 -->
		<scroll-view reverse id="myScroll" class="vip-list" scroll-y style="flex: 1;overflow-y: hidden;" @scroll='scroll' :scroll-top="scrollTop"
			enhanced="true" lower-threshold="50" @scrolltolower="onScrollToLower" @scrolltoupper='scrolltoupper'>
			<view v-for="(item,index) in vipItems" class="vip-item" :key="index">
				<!-- 服务图片 -->
				<view class="vip-image-container">
					<image class="vip-image" :src="item.imageUrl" mode="widthFix"></image>
				</view>

				<!-- 服务信息 -->
				<view class="vip-info">
					<view class="vip-header flex-row">
						<text class="vip-title">{{ item.title }}</text>
						<text class="vip-time">{{ item.time }}</text>
					</view>

					<view class="vip-content">
						<text class="vip-description">{{ item.description }}</text>
					</view>

					<view class="vip-footer">
						<view class="vip-location">
							<uni-icons type="map-pin" size="16" color="#666"></uni-icons>
							<text class="location-text">{{ item.location }}</text>
						</view>
						<view class="vip-price flex-row">
							<text class="price-symbol">¥</text>
							<text class="price-value">{{ item.price }}</text>
							<text class="price-unit">起</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="vip-item" v-for="(item, index) in vipItems" :key="index" :animation="item.animationData">
					
				</view> -->

		</scroll-view>
		<!-- 加载中提示 -->
		<view class="loading" v-if="loading">
			<uni-loading-icon type="spinner" size="24"></uni-loading-icon>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 没有更多数据提示 -->
		<view class="no-more" v-if="noMore && !loading">
			<text>没有更多内容了</text>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			PageCur: {
				type: Number,
				default: 1
			}
		},
		watch: {
			PageCur(val) {
				if (val == 1) {
					console.log('设置滚动条位置');
					this.scrollTop = this.scrollTop==0?1:0
				}
			}
		},
		data() {
			return {
				scrollTop: 0,
				// 贵宾服务列表数据
				vipItems: [],
				// 当前页码
				page: 1,
				// 每页数量
				pageSize: 13,
				// 加载状态
				loading: false,
				isRefreshing: false,
				// 是否还有更多数据
				noMore: false
			};
		},

		created() {
			// 初始加载数据
			this.loadVipItems();

		},
		mounted() {

		},

		// onReachBottom() {
		// 	console.log('上拉触底');
		// 	// 上拉加载更多
		// 	if (!this.loading && !this.noMore) {
		// 		this.page++;
		// 		this.loadVipItems();
		// 	}
		// },

		methods: {
			scroll(e) {
				// console.log('e',e);
			},
			onScrollToLower() {
				console.log('到底');
				if(this.loading) return
				this.loading = true;
				const list = this.vipItems
				const len = list.length
				for (let i = len; i < len + 3; i++) {
					const id = (this.page - 1) * this.pageSize + i + 1;
					list.push({
						id,
						title: `机场VIP贵宾厅${id}`,
						height: (Math.floor(Math.random() * 4) + 1) * 100,

						description: `提供舒适休息环境、免费饮品、小吃、WiFi、充电插座等服务，让您的候机时光更加惬意。`,
						imageUrl: `/static/images/1.jpg`,
						location: `首都机场T${(id % 3) + 1}航站楼`,
						price: 120 + Math.floor(Math.random() * 180),
						time: this.formatTime(new Date(Date.now() - Math.floor(Math.random() * 7 * 24 *
							60 * 60 * 1000)))
					})
				}
				this.vipItems = list
				this.loading = false;

			},
			scrolltoupper(e) {
				console.log('顶', 1);
			},
			// 加载贵宾服务数据
			loadVipItems() {
				this.loading = true;

				// 模拟API请求延迟
				setTimeout(() => {
					// 模拟数据
					const mockData = [];
					for (let i = 0; i < this.pageSize; i++) {
						const id = (this.page - 1) * this.pageSize + i + 1;
						mockData.push({
							id,
							height: (Math.floor(Math.random() * 4) + 1) * 100,
							title: `机场VIP贵宾厅${id}`,
							description: `提供舒适休息环境、免费饮品、小吃、WiFi、充电插座等服务，让您的候机时光更加惬意。`,
							imageUrl: `/static/images/1.jpg`,
							location: `首都机场T${(id % 3) + 1}航站楼`,
							price: 120 + Math.floor(Math.random() * 180),
							time: this.formatTime(new Date(Date.now() - Math.floor(Math.random() * 7 * 24 *
								60 * 60 * 1000)))
						});

					}

					// 添加动画效果
					// mockData.forEach(item => {
					//   item.animationData = this.createAnimation();
					// });

					// 追加数据
					this.vipItems = this.vipItems.concat(mockData);

					// 模拟数据加载完成
					this.loading = false;

					// 模拟数据结束条件（第5页后没有更多数据）
					if (this.page >= 5) {
						this.noMore = true;
					}


				}, 1000);
			},


			// 创建动画效果
			createAnimation() {
				const animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				});

				animation
					.translateY(20)
					.opacity(0)
					.step()
					.translateY(0)
					.opacity(1)
					.step();

				return animation.export();
			},

			// 格式化时间
			formatTime(date) {
				const now = new Date();
				const diffMs = now - date;
				const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

				if (diffDays === 0) {
					return '今天';
				} else if (diffDays === 1) {
					return '昨天';
				} else if (diffDays < 7) {
					return `${diffDays}天前`;
				} else {
					const month = date.getMonth() + 1;
					const day = date.getDate();
					return `${month}月${day}日`;
				}
			}
		}
	};
</script>

<style scoped>
	.discovery-page {
		background-color: #f5f5f5;
		min-height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
	}

	/* 导航栏样式 */
	.navbar {
		height: 44px;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #eeeeee;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.navbar-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}

	/* 列表样式 */
	.vip-list {
		flex: 1;
		padding: 10px 10px 0;
	}

	.vip-item {
		background-color: #ffffff;
		border-radius: 10px;
		margin-bottom: 15px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
	}

	.vip-item:hover {
		transform: translateY(-2px);
	}

	/* 图片样式 */
	.vip-image-container {
		width: 100%;
	}

	.vip-image {
		width: 100%;
		height: auto;
		border-radius: 10px 10px 0 0;
	}

	/* 信息样式 */
	.vip-info {
		padding: 15px;
	}

	.vip-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.vip-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		flex: 1;
		line-height: 1.4;
	}

	.vip-time {
		font-size: 12px;
		color: #999999;
		margin-left: 10px;
		white-space: nowrap;
	}

	.vip-content {
		margin-bottom: 15px;
	}

	.vip-description {
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.vip-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.vip-location {
		display: flex;
		align-items: center;
	}

	.location-text {
		font-size: 13px;
		color: #666666;
		margin-left: 5px;
	}

	.vip-price {
		display: flex;
		align-items: baseline;
	}

	.price-symbol {
		font-size: 13px;
		color: #ff5252;
	}

	.price-value {
		font-size: 16px;
		font-weight: bold;
		color: #ff5252;
	}

	.price-unit {
		font-size: 13px;
		color: #ff5252;
		margin-left: 2px;
	}

	/* 加载提示样式 */
	.loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px 0;
	}

	.loading-text {
		font-size: 14px;
		color: #999999;
		margin-top: 10px;
	}

	/* 没有更多数据样式 */
	.no-more {
		text-align: center;
		padding: 20px 0;
		font-size: 14px;
		color: #999999;
	}
</style>